<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr>
    <div>text: {{ text }}</div>
    
    


  </div>
</template>

<script>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  setup() {

    console.log('setup');
    const text = ref('我爱你')
    setTimeout(() => {
        text.value +='祥子'
    }, 2000);

    //挂载前获取不到真实DOM
    onBeforeMount(() => {
      console.log('挂载前');
    })

    //挂载后可以获取真实DOM
    onMounted(() => {
      console.log('挂载后');
    })

    //数据更新引发DOM更新,更新前指的是DOM更新前
    onBeforeUpdate(()=> {
      console.log('更新前');
    })

    //更新后指的是DOM更新后
    onUpdated(()=> {
      console.log('更新后');
    })

    onBeforeUnmount(()=> {
      console.log('卸载前');
    })

    onUnmounted(() => {
      console.log('卸载后');
    })
    


    return {
      text
    }
    }

   
  
}
</script>

<style scoped >

</style>